
<template>
 <div>
  <a-row> <h1 class="title cartoonFont">For You</h1></a-row>
  <a-row justify="space-between">
    <a-col :span="11">
        <div class="card">
            <div class="cardtitle">每日推荐</div>
            <PlayCircleOutlined class="cardIcon"></PlayCircleOutlined>
        </div>
        
    </a-col>
    <a-col :span="11">
        <div class="cardPlay">
        <img src="https://p3.music.126.net/3CIzjJXMMTUYhl0PClJbCw==/109951167087479203.jpg?param=512y512" alt="">
        <div>
        <span class="name">剑与蔷薇</span>
        <div>Capper</div>
        <div class="icon">
            <PlayCircleOutlined style="margin:6%"></PlayCircleOutlined>
            <LikeOutlined style="margin:6%"></LikeOutlined>
            <SendOutlined style="margin:6%"></SendOutlined>
        </div>
        </div>
        </div>
        
    </a-col>
 </a-row>
 </div>
</template>


<script lang="ts">
import { defineComponent, ref,onMounted } from "@vue/runtime-core";
import { PlayCircleOutlined,LikeOutlined,SendOutlined } from '@ant-design/icons-vue';
import { getNewSongStore } from "../../store";

  export default defineComponent({
     name:"app",
     components:{PlayCircleOutlined,LikeOutlined,SendOutlined},
     setup(){
     
      return{
      }
     }
  })
</script>

<style lang="less" scoped>
.card{
    border: 3px solid black;
    border-radius: 8px;
    height: 20vh;
    background: url(https://p1.music.126.net/AhYP9TET8l-VSGOpWAKZXw==/109951165134386387.jpg?param=1024y1024) no-repeat ;
    background-position-y: top;
    animation : cardImage 30s infinite;
    display: flex;
    justify-content: space-between;
    .cardtitle{
        font-size: 75px;
        font-weight: 900;
        color: #fff;
        padding: 1.8rem;
    }
    .cardIcon{
        font-size: 50px;
        font-weight: 900;
        color: #fff;
        padding-top: 16%;
        padding-right: 4%;
    }
}
.cardPlay{
    border: 3px solid black;
    border-radius: 8px;
    height: 20vh;
    background-color: #77DDFF;
    background: linear-gradient(to bottom right,#99FFFF, #77DDFF,#5599FF,#33CCFF,#77DDFF,#99FFFF);
    display: flex;
    font-weight: 900;
    color: #fff;
    img{
        padding: 1rem;
        width: 10vw;
    }
    div{
        font-size: 24px;
        width: 100%;
        .name{
        font-size: 40px;
        font-weight: 900;
        color: #fff;
        padding-top: 2%;
        }
        .icon{
            font-size: 38px;
        }
    }
}
.cardPlay:hover{
   cursor: pointer;
   box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.8);
}
.card :hover{
   cursor: pointer;
   box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.8);
}
@keyframes cardImage{
    0%{
        background-position-y: 0%;
    }
    25%{
        background-position-y: 25%;
    }
    50%{
        background-position-y: 50%;
    }
    75%{
        background-position-y: 75%;
    }
    100%{
        background-position-y: 100%;
    }
}
</style>
